<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>


  <!--bootstrap3-->
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
  <link rel="stylesheet" href="/css/style.css">



</head>
<body>
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">课程信息</h3>
  </div>
  <div class="panel-body">
    <div style="display:inline-block;">

      <div style="float:left;padding:6px;">
        <span>课程名：</span>
      </div>
      <div style="float:left;">
        <input id="searchName" class="form-control" style="width:200px;" placeholder="请输入课程名" />
      </div>
      <div style="float:left;padding:6px;">
        <span>专业编号：</span>
      </div>
      <div style="float:left;">
        <!--                    <select id="gender" class="form-control" style="width:200px;">-->
        <!--                        <option value="">请选择</option>-->
        <!--                        <option value="男">男</option>-->
        <!--                        <option value="女">女</option>-->
        <!--                    </select>-->
        <input id="searchMid" class="form-control" style="width:200px;" placeholder="请输入编号" />
      </div>
      <div style="float:left;margin-left:20px;">
        <button id="query" class="btn btn-primary" onclick="search();">
                        <span class="glyphicon glyphicon-search">
		                </span> 查询
        </button>
        <button id="refresh" class="btn btn-default" onclick="resetList();">
                        <span class="glyphicon glyphicon-refresh">
		                </span> 刷新
        </button>
        <!-- Button trigger modal -->
        <!--                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="preAdd();">-->
        <!--                        <span class="glyphicon glyphicon-plus">-->
        <!--                        </span>新增-->
        <!--                    </button>-->
        <!--                    <button type="button" class="btn btn-danger"   onclick="batchDelete();">-->
        <!--                        <span class="glyphicon glyphicon-trash">-->
        <!--                        </span>批量删除-->
        <!--                    </button>-->
        <!--                    <button type="button" id="upload" class="btn btn-primary">-->
        <!--                        批量导入-->
        <!--                    </button>-->

      </div>
    </div>
  </div>
</div>
<div class="box1">

  <table class="table table-bordered table-striped" id="stuTable"></table>
</div>


<!--批量导入模态框-->
<!--批量导入操作-->
<!-- 模态框（Modal） -->

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ModalLabel">文件上传</h4>
      </div>
      <div class="modal-body">
        <input id="f_upload" type="file"  name="file"/>
      </div>

    </div>
  </div>
</div>


<!-- 学生Modal -->
<!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">-->
<!--    <div class="modal-dialog" role="document">-->
<!--        <div class="modal-content">-->
<!--            <div class="modal-header">-->
<!--                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
<!--                <h4 class="modal-title" id="myModalLabel">科目成绩信息</h4>-->
<!--            </div>-->
<!--            <div class="modal-body">-->
<!--                <form id="formStudent">-->
<!--                    <input hidden="hidden" id="id" name="id">-->
<!--                    <div class="form-group">-->
<!--                        <label for="cno">课程号</label>-->
<!--                        <input type="text" class="form-control" id="cno" aria-describedby="emailHelp" placeholder="Enter cno" name="cno">-->
<!--                    </div>-->
<!--                    <div class="form-group">-->
<!--                        <label for="cname">课程名</label>-->
<!--                        <input type="text" class="form-control" id="cname" aria-describedby="emailHelp" placeholder="Enter cname" name="cname">-->
<!--                    </div>-->

<!--                    <div class="form-group">-->
<!--                        <label for="chour">学时</label>-->
<!--&lt;!&ndash;                        <select class="form-control" id="chour" name="chour">&ndash;&gt;-->
<!--&lt;!&ndash;                            <option value="男">男</option>&ndash;&gt;-->
<!--&lt;!&ndash;                            <option value="女">女</option>&ndash;&gt;-->
<!--&lt;!&ndash;                        </select>&ndash;&gt;-->
<!--                        <input type="text" class="form-control" id="chour" aria-describedby="emailHelp" placeholder="Enter chour" name="chour">-->
<!--                    </div>-->

<!--                    <div class="form-group">-->
<!--                        <label for="credit">学分</label>-->
<!--                        <input type="text" class="form-control" id="credit" aria-describedby="emailHelp" placeholder="Enter credit" name="credit">-->
<!--                    </div>-->

<!--                    <div class="form-group">-->
<!--                        <label for="deptid">院系编号</label>-->
<!--                        <input type="text" class="form-control" id="deptid" aria-describedby="emailHelp" placeholder="Enter deptid" name="deptid">-->
<!--                    </div>-->

<!--                    <div class="form-group">-->
<!--                        <label for="mid">专业编号</label>-->
<!--                        <input type="text" class="form-control" id="mid" aria-describedby="emailHelp" placeholder="Enter mid" name="mid">-->
<!--                    </div>-->

<!--                    <div class="form-group">-->
<!--                        <label for="xkrs">选课人数</label>-->
<!--                        <input type="text" class="form-control" id="xkrs" aria-describedby="emailHelp" placeholder="Enter xkrs" name="xkrs">-->
<!--                    </div>-->

<!--                </form>-->
<!--            </div>-->
<!--            <div class="modal-footer">-->
<!--                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
<!--                <button type="button" class="btn btn-primary" onclick="saveStudent();">-->
<!--                    <span class="glyphicon glyphicon-floppy-save"></span>-->
<!--                    保存-->
<!--                </button>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!--学生详情-->
<div class="modal fade" tabindex="-1" role="dialog" id="detailModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">课程详情</h4>
      </div>
      <div class="modal-body">

        <table class="table11_6">
          <tr>
            <td> <span>课程号：</span> </td>
            <td>
              <input type="text" class="form-control form1" id="cno" aria-describedby="emailHelp" placeholder="Enter cno" name="cno" readonly="readonly">
            </td>
          </tr>
          <tr>
            <td> <span>课程名：</span></td>
            <td>
              <input type="text" class="form-control form1" id="cname" aria-describedby="emailHelp" placeholder="Enter cname" name="cname"  readonly="readonly">
            </td>

          </tr>
          <tr>
            <td> <span>学时：</span></td>
            <td>
              <input type="text" class="form-control form1" id="chour" aria-describedby="emailHelp" placeholder="Enter chour" name="chour"  readonly="readonly">
            </td>
          </tr>
          <tr>
            <td> <span>学分：</span></td>
            <td> <input type="text" class="form-control form1" id="credit" aria-describedby="emailHelp" placeholder="Enter credit" name="credit"  readonly="readonly"></td>
          </tr>

          <tr>
            <td><span>院系编号：</span></td>
            <td> <input type="text" class="form-control form1" id="deptid" aria-describedby="emailHelp" placeholder="deptid" name="deptid"  readonly="readonly"></td>
          </tr>

          <tr>
            <td><span>专业编号：</span></td>
            <td> <input type="text" class="form-control form1" id="mid" aria-describedby="emailHelp" placeholder="mid" name="mid"  readonly="readonly"></td>
          </tr>

          <tr>
            <td><span>选课人数：</span></td>
            <td> <input type="text" class="form-control form1" id="xkrs" aria-describedby="emailHelp" placeholder="xkrs" name="xkrs"  readonly="readonly"></td>
          </tr>


        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <!--        <button type="button" class="btn btn-primary">Save changes</button>-->
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/courseupload.js"></script>
<script src="/js/fileinput.min.js"></script>
<script src="/js/msg.js"></script>
<script>

  /**
   * 显示学生列表
   */
  function loadTable(){
    $("#stuTable").bootstrapTable({
      url: '/webapi/course/getbypage',
      striped:true, //设置为ture有隔行变色效果
      pagination:true,//设置为true会在底部显示分页条
      singleSelect: false,//设置为true将禁止多选
      pageSize:6,   //设置分页的每页条数
      pageList:[6],
      pageNumber:1, //设置了分页，首页页码
      uniqueId : "id", //每一行的唯一标识，一般为主键列
      clickToSelect: true,
      sortName: "id",
      sortOrder: "asc",
      onSort:function (name,order){

        console.log(name);
        console.log(order);
      },
      sidePagination: "server", //设置在哪里进行分页，可选值为"client"或者
      queryParams:function (params){
        let paraObj = {
          size: params.limit,
          page: params.offset/params.limit,
          sort: params.sort,
          direct: params.order,
          cname:$("#searchName").val(),
          mid: $("#searchMid").val()
        };
        return paraObj;
      },

      onLoadError:function (rs){
        console.log(rs)
        if (rs.code == 403){
          window.location.href = "../../templates/login/user.html"
        }
      },
      responseHandler:function (res){
        console.log(res)
        return {
          "total": res.data.total, // 总页数
          "rows": res.data.rows    // 数据
        }
      },
      columns:[{
        align: "center",
        sortable: true,
        field: "id",
        title: "序号"
      },{
        align: "center",
        sortable: true,
        field: "cno",
        title: "课程号"
      },{
        align: "center",
        sortable: true,
        field: "cname",
        title: "课程名"
      },{
        align: "center",
        sortable: true,
        field: "chour",
        title: "学时"
      },{
        align: "center",
        sortable: true,
        field: "credit",
        title: "学分"
      },{
        align: "center",
        sortable: true,
        field: "deptid",
        title: "院系编号"
      },{
        align: "center",
        sortable: true,
        field: "mid",
        title: "专业编号"
      },{
        align: "center",
        sortable: true,
        field: "xkrs",
        title: "选课人数"
      },{
        field: 'id',
        title: '操作',
        align: 'center',
        formatter: function(value,row,index){
          // let e = "<a href='#' style='text-decoration: none;color: #0099CC;font-size: 14px' onclick='queryCourse("+row.id+");'>详情</a> "
          // let e = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='editStudent("+row.id+");'>编辑</a> "
          // let d = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='deleteStudent("+row.id+")'>删除</a>"
          // let e = "<button  class='btn btn-primary btn-xs' style='width: 60px;height: 30px' onclick='editStudent("+row.id+");'>" +
          //     "<span class='glyphicon glyphicon-edit'></span>编辑</button> "
          // let d = "<button  class='btn btn-danger btn-xs' style='width: 60px;height: 30px' onclick='deleteStudent("+row.id+")'>" +
          //     "<span class='glyphicon glyphicon-trash'></span>删除</button>"

          let e = "<button  class='btn btn-primary btn-xs' style='width: 60px;height: 30px' onclick='queryCourse("+row.id+");'>" +
              "详情</button> "
          return e;
        },width:250 //自定义修改，增加修改、删除标志
      }],
      formatNoMatches: function (){
        return "没有相关的匹配结果";
      },
      formatLoadingMessage:function (){
        return "请稍等，正在加载中...";
      }
    })
  }

  function queryCourse(id){
    //查看按钮 显示模态框
    $("#detailModal").modal("show");

    $.ajax({
      url:'/webapi/course/get/'+id
    }).done(function (rs){
      console.log(rs)
      if (rs.code === 200){
        let data = rs.data
        $("#id").val(data.id);
        $("#cno").val(data.cno);
        $("#cname").val(data.cname);
        $("#chour").val(data.chour);
        $("#credit").val(data.credit);
        $("#deptid").val(data.deptid);
        $("#mid").val(data.mid);
        $("#xkrs").val(data.xkrs);
      }
    })
  }
  // /**
  //  * 批量删除
  //  */
  // function batchDelete(){
  //     let rows = $("#stuTable").bootstrapTable("getSelections");
  //     let len = rows.length;
  //     if(len == 0){
  //         alert("请选择要删除的行");
  //     }else{
  //         if(confirm("你确定删除"+len+"条内容吗？")){
  //             let arr = [];
  //             for (let i = 0;i < len;i++){
  //                 arr.push(rows[i].id);
  //             }
  //             $.ajax({
  //                 url: '/webapi/course/batchdelete/'+arr,
  //                 method: 'delete'
  //             }).done(function (rs){
  //                 if (rs.code == 200){
  //                     $("#stuTable").bootstrapTable("destroy");
  //                     loadTable();
  //                     message.showText("success","批量删除成功");
  //                 }
  //
  //             })
  //         };
  //
  //
  //     }
  //
  // }
  //
  // /**
  //  * 删除学生
  //  */
  // function deleteStudent(id){
  //     if(confirm("您是否真的要删除该记录?")){
  //         $.ajax({
  //             url: '/webapi/course/delete/'+id,
  //             method: 'delete'
  //         }).done(function (rs){
  //             if (rs.code == 200){
  //                 alert("删除成功");
  //                 $("#stuTable").bootstrapTable("destroy");
  //                 loadTable();
  //                 message.showText("success","删除成功");
  //             }
  //
  //         })
  //     }
  //
  // }
  //
  // /**
  //  * 点击新增时给id赋值，以便判断做新增操作
  //  */
  // function preAdd(){
  //     $("#id").val(0);
  //     $("#cno").val("");
  //     $("#cname").val("");
  //     $("#chour").val("");
  //     $("#credit").val("");
  //     $("#deptid").val("");
  //     $("#mid").val("");
  //     $("#xkrs").val("");
  // }
  //
  // // 修改之前获取学生信息
  // function editStudent(id){
  //     $('#myModal').modal('show')
  //     $.ajax({
  //         url:'/webapi/course/get/'+id
  //     }).done(function (rs){
  //         console.log(rs)
  //         if (rs.code == 200){
  //             let data = rs.data
  //             $("#id").val(data.id);
  //             $("#cno").val(data.cno);
  //             $("#cname").val(data.cname);
  //             $("#chour").val(data.chour);
  //             $("#credit").val(data.credit);
  //             $("#deptid").val(data.deptid);
  //             $("#mid").val(data.mid);
  //             $("#xkrs").val(data.xkrs);
  //         }
  //     })
  // }
  //
  // /**
  //  * 根据id判断是新增还是更新，判断之后做新增和更新操作
  //  */
  // function saveStudent(){
  //     let data = $("#formStudent").serialize();
  //     let id = $("#id").val();
  //     if (id < 1){
  //         //是新增
  //         $.ajax ({
  //             url:"/webapi/course/insert",
  //             method:"post",
  //             data:data
  //         }).done(function (rs) {
  //             console.log(rs)
  //             if (rs.code == 200){
  //                 $('#stuTable').bootstrapTable('destroy');
  //                 loadTable();
  //                 $('#myModal').modal('hide');
  //                 message.showText("success","新增成功");
  //             }
  //
  //         });
  //     } else {
  //
  //         //是更新
  //         $.ajax ({
  //
  //             url:"/webapi/course/update",
  //             method:"put",
  //
  //             data:data
  //
  //         }).done(function (rs) {
  //             if (rs.code == 200){
  //                 $('#stuTable').bootstrapTable('destroy');
  //                 loadTable();
  //                 $('#myModal').modal('hide');
  //                 message.showText("success","更新成功");
  //             }
  //         });
  //     }
  // }

  /**
   * 刷新数据
   */
  function resetList(){
    $("#searchName").val("");
    $("#searchMid").val("");
    $('#stuTable').bootstrapTable("destroy");
    loadTable();
  }
  function search(){
    $("#stuTable").bootstrapTable("destroy");
    loadTable();
  }

  $(function (){
    loadTable()
  })
</script>

</body>
</html>